<!--
 * @Description: 
 * @Author: duan_shuangjun 丶
 * @Date: 2024-09-03 17:42:30
 * @LastEditTime: 2025-09-13 15:45:03
-->
<!--营业- 交班  -  弹窗组件-->
<template>
  <CustomDialog v-model:visible="isShowDialog" @close="cancelFun">
    <div class="dialog-content">
      <div class="title">{{ title }}</div>
      <div class="tips" v-html="content"></div>

      <div class="btn-gurop">
        <el-button v-if="isOnCancel" @click="onCancel" class="cancel-btn">
          {{ onCancelText }}
        </el-button>
        <el-button type="primary" @click="onSumbit" :loading="loading" class="submit-btn">
          {{ loading ? '处理中...' : onSumbitText }}
        </el-button>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElButton } from 'element-plus'
import CustomDialog from '../CustomDialog/Index.vue'

interface Props {
  title?: string
  content?: string
  isOnCancel?: boolean
  onCancelText?: string
  onSumbitText?: string
  onClose?: () => void
  onSumbit?: () => void
  onCancel?: () => void
  onManualClose?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  content: '',
  isOnCancel: true,
  onCancelText: '关闭',
  onSumbitText: '15分钟后提醒'
})

const isShowDialog = ref(true)
const loading = ref(false)

onMounted(() => {
  // 将实例暴露到全局变量
  window.__messageTipsInstance__ = {
    setLoading: setLoading,
    manualClose: manualClose
  }
})

onUnmounted(() => {
  // 清理全局变量
  delete window.__messageTipsInstance__
})

function onCancel() {
  isShowDialog.value = false
  // 优先调用 onCancel 回调，如果没有则调用 onClose
  if (props.onCancel) {
    props.onCancel()
  } else {
    props.onClose?.()
  }
}
function cancelFun() {
  isShowDialog.value = false
  // props.onCancel?.()
}

function onSumbit() {
  loading.value = true
  props.onSumbit?.()
}

// 暴露手动关闭方法
function manualClose() {
  isShowDialog.value = false
  props.onManualClose?.()
}

// 暴露loading状态控制
function setLoading(loadingState: boolean) {
  loading.value = loadingState
}

// 暴露方法给父组件
defineExpose({
  manualClose,
  setLoading
})
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .title {
    font-size: 20px;
    font-weight: 700;
    color: #353535;
    text-align: center;
  }

  .tips {
    padding-top: 70px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #353535;
    width: 500px;
    line-height: 40px;
  }

  .progress {
    padding-top: 20px;
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #666666;
  }

  .btn-gurop {
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 20px;
    margin-top: 60px;
  }

  .cancel-btn {
    width: 190px;
    height: 52px;
    border: 1px solid #d2d2d2;
    border-radius: 14px;
    font-size: 18px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #353535;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #7c0a03;
      color: #7c0a03;
    }
  }

  .submit-btn {
    width: 190px;
    height: 52px;
    background: #7c0a03;
    border: 1px solid #7c0a03;
    border-radius: 14px;
    font-size: 18px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover:not(:disabled) {
      background: #5a0702;
      border-color: #5a0702;
    }

    &:disabled {
      background: #ccc;
      border-color: #ccc;
    }
  }
}
</style>
